<! DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>定位导航</title>
        <script src="http://libs.baidu.com/jquery/1.10.2/jquery.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $(window).scroll(function(){
                var top=$(document).scrollTop();
                var menu=$("#menu");
                var item=$("#content").find(".items");
                    var currentId="";
                item.each(function(){
                    var a=$(this);
                    var itemTop=a.offset().top;//offset()方法获取相对偏移值top left 两个属性
                    console.log(itemTop);//输出顶部距离
                    if(top >itemTop-200){
                        currentId="#"+a.attr("id");
                        console.log("当前顶部距离："+top+"-当前楼层："+currentId);
                    }else{
                        return false;
                    }
                    });
                    //设置相应楼层的current。取消原有的current
                    var currentlink=menu.find(".current");
                    if(currentId && currentlink.attr("href")!=currentId){
                        currentlink.removeClass("current");
                        menu.find("[href=" + currentId + "]").addClass("current");
                    }
                    
                });
            });
        </script>
        <style type="text/css">
        *{
        margin: 0;
        padding: 0;
        }
        body{
            font-family: "微软雅黑";
            font-size: 12px;
            line-height: 2;
            background-color: #cccccc;
        }
        li{
            list-style:none;
        }
        #content{
            width: 810px;
            margin: 0 auto;
            padding: 20px;
        }
        #content h1{
            color: #fff;
        }
        #content .items{
            padding: 20px;
            margin-bottom: 20px;
            border: 1px dotted #5f5f5f;
        }
        #content .items h2{
            font-weight: bold;
            border-bottom: 2px solid #5f5f5f;
            margin-bottom:10px;
        }
        #content .items li{
            display:inline;
        } 
        #content .items li a img{
            width: 240px;
            height: 240px;
            border: none; 
            margin: 6px;
        } 
        #menu{
            position: fixed;
            top: 100px;
            left: 50%;
            margin-left: 400px;
            width: 50px;
        }
        #menu ul li a{
            display: block;
            margin: 5px;
            font-size: 14px;
            font-weight: bold;
            color: #fff;
            width: 50px;
            text-align: center;
            text-decoration: none;
        }
        #menu ul li a:hover, #menu ul li a.current{
            color: #5f5f5f;
            background-color: #fff;
        }
          * html,*html body {
            background-image: url(about:blank);
            background-attachment:fixed;
        }
        * html #menu {
            position:absolute;
            top:expression(((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+100+'px');
        }  
        </style>
    </head>
    <body>
        <div id="menu">
        <ul>
            <li><a href="#item1" class="current">1F </a></li>
            <li><a href="#item2">2F </a></li>
            <li><a href="#item3">3F </a></li>
            <li><a href="#item4">4F </a></li>
            <li><a href="#item5">5F </a></li>
            <li><a href="#item6">6F </a></li>
        </ul>
        </div>
        <div id="content">
            <h1>分类信息</h1>
            <div id="item1" class="items">
            <h2>1F</h2>
                <ul>
                    <li><a><img src="img/%E7%AC%94%E8%AE%B0%E6%9C%AC%E7%94%B5%E8%84%91.png" /></a></li>
                    <li><a><img src="img/%E7%AC%94%E8%AE%B0%E6%9C%AC%E7%94%B5%E8%84%91.png" /></a></li>
                    <li><a><img src="img/%E7%AC%94%E8%AE%B0%E6%9C%AC%E7%94%B5%E8%84%91.png" /></a></li>
                    <li><a><img src="img/%E7%AC%94%E8%AE%B0%E6%9C%AC%E7%94%B5%E8%84%91.png" /></a></li>
                    <li><a><img src="img/%E7%AC%94%E8%AE%B0%E6%9C%AC%E7%94%B5%E8%84%91.png" /></a></li>
                    <li><a><img src="img/%E7%AC%94%E8%AE%B0%E6%9C%AC%E7%94%B5%E8%84%91.png" /></a></li>
                    <li><a><img src="img/%E7%AC%94%E8%AE%B0%E6%9C%AC%E7%94%B5%E8%84%91.png" /></a></li>
                    <li><a><img src="img/%E7%AC%94%E8%AE%B0%E6%9C%AC%E7%94%B5%E8%84%91.png" /></a></li>
                    <li><a><img src="img/%E7%AC%94%E8%AE%B0%E6%9C%AC%E7%94%B5%E8%84%91.png" /></a></li>
                </ul>
            </div>
            <div id="item2" class="items">
            <h2>2F</h2>
                <ul>
                    <li><a><img src="img/psb.png" /></a></li>
                    <li><a><img src="img/psb.png" /></a></li>
                    <li><a><img src="img/psb.png" /></a></li>
                    <li><a><img src="img/psb.png" /></a></li>
                    <li><a><img src="img/psb.png" /></a></li>
                    <li><a><img src="img/psb.png" /></a></li>
                    <li><a><img src="img/psb.png" /></a></li>
                    <li><a><img src="img/psb.png" /></a></li>
                    <li><a><img src="img/psb.png" /></a></li>
            </div>
            <div id="item3" class="items">
            <h2>3F</h2>
                <ul>
                    <li><a><img src="img/%E8%9C%82%E7%8C%B4.png" /></a></li>
                    <li><a><img src="img/%E8%9C%82%E7%8C%B4.png" /></a></li>
                    <li><a><img src="img/%E8%9C%82%E7%8C%B4.png" /></a></li>
                    <li><a><img src="img/%E8%9C%82%E7%8C%B4.png" /></a></li>
                    <li><a><img src="img/%E8%9C%82%E7%8C%B4.png" /></a></li>
                    <li><a><img src="img/%E8%9C%82%E7%8C%B4.png" /></a></li>
                    <li><a><img src="img/%E8%9C%82%E7%8C%B4.png" /></a></li>
                    <li><a><img src="img/%E8%9C%82%E7%8C%B4.png" /></a></li>
                    <li><a><img src="img/%E8%9C%82%E7%8C%B4.png" /></a></li>
                </ul>
            </div>
            <div id="item4" class="items">
            <h2>4F</h2>
                <ul>
                    <li><a><img src="img/%E7%AC%94%E8%AE%B0%E6%9C%AC%E7%94%B5%E8%84%91.png" /></a></li>
                    <li><a><img src="img/%E7%AC%94%E8%AE%B0%E6%9C%AC%E7%94%B5%E8%84%91.png" /></a></li>
                    <li><a><img src="img/%E7%AC%94%E8%AE%B0%E6%9C%AC%E7%94%B5%E8%84%91.png" /></a></li>
                    <li><a><img src="img/%E7%AC%94%E8%AE%B0%E6%9C%AC%E7%94%B5%E8%84%91.png" /></a></li>
                    <li><a><img src="img/%E7%AC%94%E8%AE%B0%E6%9C%AC%E7%94%B5%E8%84%91.png" /></a></li>
                    <li><a><img src="img/%E7%AC%94%E8%AE%B0%E6%9C%AC%E7%94%B5%E8%84%91.png" /></a></li>
                    <li><a><img src="img/%E7%AC%94%E8%AE%B0%E6%9C%AC%E7%94%B5%E8%84%91.png" /></a></li>
                    <li><a><img src="img/%E7%AC%94%E8%AE%B0%E6%9C%AC%E7%94%B5%E8%84%91.png" /></a></li>
                    <li><a><img src="img/%E7%AC%94%E8%AE%B0%E6%9C%AC%E7%94%B5%E8%84%91.png" /></a></li>
                </ul>
            </div>
            <div id="item5" class="items">
            <h2>5F</h2>
                <ul>
                    <li><a><img src="img/psb.png" /></a></li>
                    <li><a><img src="img/psb.png" /></a></li>
                    <li><a><img src="img/psb.png" /></a></li>
                    <li><a><img src="img/psb.png" /></a></li>
                    <li><a><img src="img/psb.png" /></a></li>
                    <li><a><img src="img/psb.png" /></a></li>
                    <li><a><img src="img/psb.png" /></a></li>
                    <li><a><img src="img/psb.png" /></a></li>
                    <li><a><img src="img/psb.png" /></a></li>
            </div>
            <div id="item6" class="items">
            <h2>6F</h2>
                <ul>
                    <li><a><img src="img/%E8%9C%82%E7%8C%B4.png" /></a></li>
                    <li><a><img src="img/%E8%9C%82%E7%8C%B4.png" /></a></li>
                    <li><a><img src="img/%E8%9C%82%E7%8C%B4.png" /></a></li>
                    <li><a><img src="img/%E8%9C%82%E7%8C%B4.png" /></a></li>
                    <li><a><img src="img/%E8%9C%82%E7%8C%B4.png" /></a></li>
                    <li><a><img src="img/%E8%9C%82%E7%8C%B4.png" /></a></li>
                    <li><a><img src="img/%E8%9C%82%E7%8C%B4.png" /></a></li>
                    <li><a><img src="img/%E8%9C%82%E7%8C%B4.png" /></a></li>
                    <li><a><img src="img/%E8%9C%82%E7%8C%B4.png" /></a></li>
                </ul>
            </div>
        </div>
    </body>
</html>